<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>绑定手机号</title>
    <link rel="stylesheet" type="text/css" href="../css/styleb.css">
    <link rel="stylesheet" type="text/css" href="../css/common.css">
    <style>
        /* 提示框 */

        .tip {
            display: none;
            padding: 10px 30px;
            border-radius: 5px;
            background-color: rgba(0, 0, 0, 0.6);
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            color: #fff;
        }
    </style>
</head>

<body>
    <div class="set-pwd">
        <div class="login-form">
            <div class="input-row wbox mt18">
                <input maxlength="11" class='mobile' type="tel" placeholder="请输入手机号" />
                <span @click="clearVal(1)" v-if='closeStatus' class="clear-icon"></span>
            </div>
            <div class="input-row wbox sms-row">
                <input v-model="loginInfo.regMsgCode" type="tel" class='regMsgCode' placeholder="请输入验证码" />
                <span v-if='closeStatus1' @click="clearVal(2)" class="clear-icon"></span>
                <button type="button" ref='sMs' @click="sendCode" class="sms-btn">获取验证码</button>
            </div>
            <div class="input-row wbox mt18">
                <input class='password' type="password" v-model="loginInfo.pwd" placeholder="请输入密码" />
                <span @click="clearVal(3)" v-if='closeStatus2' class="clear-icon"></span>
            </div>
            <div class="check-protocol">
                <span class="check noChecked"></span> 我已阅读并接收
                <a href='Agreement.html'>大件会用户协议</a>
            </div>
            <div class="mt18">
                <button type="button" class="btn-blcok btn-gary radius5 sub">提交</button>
            </div>
            <div class="forget-pwd-text">
                <div class="forget-pwd-text mt30">
                    <a href="./bindTelY.html">绑定已有账号</a>
                </div>
            </div>
        </div>
        <div class="tip"></div>
        
        <!-- <div class="test1"></div>
        <div class="test2"></div> -->
    </div>
</body>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="../js/prompt.js"></script>
<script type="text/javascript">
    $(function () {
        // alert(localStorage.getItem("fromId"))
        var fromId = JSON.parse(localStorage.getItem("fromId"));
        var initiatorId = fromId.initiatorId || ''
        var isopenPage = fromId.isopenPage || '';
        var from = fromId.spreadId || ''
        // alert(isopenPage)
        if (isopenPage != 0 || isopenPage == '') {
            isopenPage = 1
            // alert(isopenPage)
        }

        var mobile = '', regMsgCode = '', password = '';
        //data绑定ajax请求参数
        var subData = {}
        var token = localStorage.getItem("token") || '';
        // alert(token)
        // alert(localStorage.getItem("userinfo"));

        var userinfo = JSON.parse(localStorage.getItem("userinfo")) || '';
        if(userinfo.thMemberVo != undefined&& userinfo.thMemberVo!=null&& userinfo.thMemberVo!='') {
            var openId = userinfo.thMemberVo.openId;
        }
        // alert(openId)
        /* 删除按钮展示 */
        $(".mobile").on("input propertychange", function () {
            $(this).next(".clear-icon").css("display", "inline-block");
        })
        $(".mobile").on("blur", function () {
            // $(this).next(".clear-icon").css("display", "none");
            mobile = $(".mobile").val();
            subData.mobile = mobile;
            if (mobile != '' && regMsgCode != '' && password != '' && $(".check").hasClass("checked")) {
                $(".mt18 button").addClass("btn-red");
            } else {
                $(".mt18 button").removeClass("btn-red");
            }
        });
        $(".regMsgCode").on("input propertychange", function () {
            $(this).next(".clear-icon").css("display", "inline-block");
        })
        $(".regMsgCode").on("blur", function () {
            // $(this).next(".clear-icon").css("display", "none");
            regMsgCode = $(".regMsgCode").val();
            subData.regMsgCode = regMsgCode;
            if (mobile != '' && regMsgCode != '' && password != '' && $(".check").hasClass("checked")) {
                $(".mt18 button").addClass("btn-red");
            } else {
                $(".mt18 button").removeClass("btn-red");
            }
        });
        $(".password").on("input propertychange", function () {
            $(this).next(".clear-icon").css("display", "inline-block");
        })
        $(".password").on("blur", function () {
            // $(this).next(".clear-icon").css("display", "none");
            password = $(".password").val();
            subData.pwd = password;
            if (mobile != '' && regMsgCode != '' && password != '' && $(".check").hasClass("checked")) {
                $(".mt18 button").addClass("btn-red");
            } else {
                $(".mt18 button").removeClass("btn-red");
            }
        });
        /* 删除按钮点击清除 */
        $(".clear-icon").on("click", function () {
            $(this).css("display", "inline-block");
            $(this).prev().val('').focus();
            $(this).hide();
        })
        /* 点击是否同意协议 */
        $(".check").on("click", function () {
            $(this).toggleClass('noChecked').toggleClass('checked');
            if ($(this).hasClass("checked")) {
                if (mobile != '' && regMsgCode != '' && password != '') {
                    $(".mt18 button").addClass("btn-red");
                } else {
                    $(".mt18 button").removeClass("btn-red");
                }
            }
        })
        /**
        *验证码提交请求
        *subData.mobile     手机号
        *subData.smsType    验证码类型
        */
        $(".sms-btn").on("click", function () {
            $(this).removeClass("btn-red");
            var that = this;
            if (!(/^1[34578]\d{9}$/.test(subData.mobile))) {
                $(".tip").html("手机号格式不正确").delay(500).show(300).delay(1000).hide(300);
            } else {
                //data绑定ajax请求参数
                subData.smsType = 2;
                $.ajax({
                    type: "post",
                    // url: url + "/api/sms/yzmMember",
                    url: url + "/api/activity/yzmMember", //更换了接口，5.4
                    data: subData,
                    async: true,
                    success: function (res) {
                        console.log(res)
                        if (res.code == 200) {
                            var sMs = $(that)
                            console.log(sMs)
                            settime(sMs)
                            $(".tip").html("验证码发送成功").delay(500).show(300).delay(1000).hide(300);
                        } else {
                            $(".tip").html(res.msg).delay(500).show(300).delay(1000).hide(300);

                        }
                    }
                })
            }

        })

        // alert('推广id'+from)
        $(".sub").on("click", function () {
            var btnstatus = $(this).hasClass("btn-red");
            if (btnstatus) {
                if (!/^1[34578]\d{9}$/.test(subData.mobile)) {
                    $(".tip").html("手机号格式不正确").show(300).delay(1000).hide(300);
                    return;
                }
                if (subData.regMsgCode == "") {
                    $(".tip").html("验证码不能为空").show(300).delay(1000).hide(300);
                    return;
                }
                if (subData.password == "") {
                    $(".tip").html("密码不能为空").show(300).delay(1000).hide(300);
                    return;
                }
                if (subData.pwd.length < 6 || subData.pwd.length > 20) {
                    $(".tip").html("密码格式不正确").show(300).delay(1000).hide(300);
                    return;
                }

                // var mobile = JSON.parse(subData.mobile)
                // console.log(subData.mobile)
                // console.log(mobileString)
                /**
                *新老会员区别请求
                *subData.mobile     手机号
                */
                $.ajax({
                    type: "post",
                    url: url + "/api/activity/memberFlag",
                    data: subData,
                    async: true,
                    success: function (res) {
                        console.log(res)
                        if (res.code == 200) {
                            if (res.obj == true) {
                                $(".tip").html("当前手机号已注册，去绑定已有账号").show(300).delay(1000).hide(300);
                            } else {
                                /**
                               *注册请求
                               *subData.mobile     手机号
                               *subData.smsType    验证码类型
                               *subData.openId    微信openId
                               *subData.regMsgCode    验证码
                               *subData.source    客户端来源
                               *subData.areaId    区域Id
                               *subData.pwd    密码
                               *subData.token    登录凭证token
                               *subData.from    推广id
                               *subData.loginType    登录类型(50-本地会员,51-第三方微信登录,52-第三方QQ登录)
                               */
                                // subData.token = '904b9972be84fde7e8ba3eb48094e6d7';
                                subData.token = token;
                                // subData.openId = 'oYAbBwk_ga7-WQ_6TxzV6gxfWO08';
                                subData.openId = openId;
                                subData.source = 3;
                                subData.areaId = 14;
                                subData.loginType = 51;
                                subData.from = from;
                                // alert('点击时推广id'+ from)
                                $.ajax({
                                    type: "post",
                                    url: url + "/api/activity/bind",
                                    data: subData,
                                    async: true,
                                    success: function (res) {
                                        console.log(res)
                                        $(".test1").html(token)
                                        $(".test2").html(openId)
                                        if (res.code == 200) {
                                            // alert(JSON.stringify(res.obj))
                                            localStorage.setItem("isbind", "true");
                                            localStorage.setItem('userinfo', JSON.stringify(res.obj));
                                            // alert(localStorage.getItem('userinfo'))
                                            $(".tip").html("绑定成功").show(300).delay(1000).hide(300);
                                            // window.location.href = './lxIndex.html?isopenPage=0&initiatorId=' + initiatorId
                                            window.location.href = './lxIndex.html?isopenPage=' + isopenPage + '&initiatorId=' + initiatorId+'&spreadId='+ from
                                            // window.location.href = './lxIndex.html?isopenPage=0&initiatorId=' + initiatorId 
                                        } else {
                                            $(".tip").html(res.msg).show(300).delay(1000).hide(300);
                                        }
                                    }
                                })
                            }
                        }
                    }
                })
            }
        })
        //短信验证码
        var countdown = 60;
        function settime(obj) {
            if (countdown == 0) {
                obj.removeAttr("disabled");
                obj.html("重新发送");
                countdown = 60;
                return;
            } else {
                obj.attr("disabled", true);
                obj.html("" + countdown + "s");
                countdown--;
            }
            setTimeout(function () {
                settime(obj)
            }, 1000)
        }

    })
</script>

</html>